<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" href="/admin/css/pintuer.css">
    <link rel="stylesheet" href="/admin/css/admin.css">
    <script type="text/javascript" src="/admin/jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="/admin/layui/layui.js"></script>
    <script type="text/javascript" src="/admin/jquery/vue.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
</head>
<body>
<div class="panel admin-panel" id="app">
    <div class="panel-head" id="add">
        <strong><span class="icon-pencil-square-o"></span>新增员工</strong>
    </div>

    <div class="body-content">
        <form id="form" class="form-x">
            <div class="form-group">
                <div class="label">
                    <label>姓名：</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" name="realname"  id="empName"/>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>电话：</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" name="phone"  id="empTel"/>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>地址：</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" name="address"  id="empAddr"/>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>银行账户：</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" name="account"  id="empBankaccount"/>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>用户名：</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" name="username" value=""  id="empUsername"/>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>密码：</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" name="pwd"  id="empPwd"/>
                </div>
            </div>

            <div class="form-group">
                <div class="label">
                    <label>选择部门：</label>
                </div>
                <select class="input" id="empDid"
                        style="width: 200px; line-height: 17px;">
                    <option >全部</option>
                    <option v-for="emp in empDid" :value="emp.deptId" v-text="emp.deptName" ></option>
                </select>
            </div>

            <div class="form-group">
                <div class="label">
                    <label>选择角色：</label>
                </div>
                <select class="input" id="empRid"
                        style="width: 200px; line-height: 17px;">
                    <option>全部</option>
                    <option v-if="empRid!=null" v-for="role in empRid" :value="role.roleId" v-text="role.roleName"></option>
                </select>
            </div>

            <div class="form-group">
                <div class="label">
                    <label>邮箱：</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" name="address"  id="empEmail"/>
                </div>
            </div>

           <br><br> <div class="form-group">

                <div class="field">
                    <button style="margin-left: 200px" class="button bg-main icon-check-square-o" type="button" onclick="insertAccount()">
                        提交并注册人脸
                    </button>

                </div>
            </div>

        </form>
    </div>
</div>
</body>

<script type="text/javascript">
    jQuery.validator.addMethod("isPhone", function(value, element) {
        var length = value.length;
        var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
        return this.optional(element) || (length == 11 && mobile.test(value));
    }, "请填写正确的手机号码");

    $(function(){
        $("#form").validate({
            rules:{
                realname:{
                  required:true,
                    minlength:2
                },
                account:{
                    required:true,
                    minlength:10
                },
                username:{
                    required:true,
                    rangelength:[6,32]
                },
                pwd:{
                    required:true,
                    rangelength:[6,32]
                },
                email:{
                    email:true
                },
                phone : {
                    isPhone:true
                },
                address:{
                    required:true,
                    rangelength:[6,50]
                }


            },
            messages:{
                realname: {
                    required:"请输入您的真实姓名",
                    minlength:"长度不合法"
                },
                account: {
                    required:"请输入您的银行卡号",
                    minlength:"长度不合法"
                },
                username:{
                    required:"请输入您的账号",
                    rangelength:"账号长度须在6-32位之间"
                },
                pwd:{
                    required:"请输入您的密码",
                    rangelength:"密码长度须在6-32位之间"
                },
                email:{
                    email:"请输入正确的电子邮箱"
                },
                phone : {
                    isPhone:"请填写正确的手机号码"
                },
                address:{
                    required:"请输入您的地址",
                    rangelength:"地址长度须在6-50位之间"
                }
            }
        })
    });


     var _this;
     var app=new Vue({
     	el:"#app",
     	data:{
            empDid:null,
            empRid:[],
            materialModels:[],
            materialPic:null,
     		//定义查询条件对象

     	},
     	created:function(){
     		_this=this;
     		this.selectByExample();
     		this.selectByRole();
     	},
     	methods:{
     		//查询部门信息
     		selectByExample:function(){
     			//_this=this;
     			$.ajax({
     				url:"/admin/emp/selectAllDept",
     				type:"get",
     				dataType:"json",
     				success:function(data){
     					_this.empDid=data.list;
     				}
     			})
     		},selectByRole:function() {
                //_this=this;
                $.ajax({
                    url: "/admin/emp/selectAllRole",
                    type: "get",
                    dataType: "json",
                    success: function (data) {
                        _this.empRid = data.list;
                    }
                })
            }


     	}
     });

     var date1 = new Date();
     var date2 = new Date();
    function insertAccount() {

        var data = {
            empName: $("#empName").val(),
            empTel: $("#empTel").val(),
            empAddr: $("#empAddr").val(),
            empBankaccount: $("#empBankaccount").val(),
            empUsername: $("#empUsername").val(),
            empPwd: $("#empPwd").val(),
            empDid: $("#empDid").val(),
            empRid: $("#empRid").val(),
            empEmail: $("#empEmail").val(),
        };

        date1 = date2;
        date2 = new Date();
        if ((date2.getTime() - date1.getTime()) < 5000) {
            alert("请不要重复提交")
        } else {
            $.ajax({
                url: "/admin/emp/addEmp",
                type: "post",
                data: data,
                dataType: "json",
                success: function (data) {
                    alert("添加成功");
                        location.href = "demo?empId="+data.obj;

                },
                error: function (error) {
                    alert("新增失败");
                }
            })
        }
    };
    // function look() {
    //     layer.open({
    //         type: 1,
    //         title: false,
    //         closeBtn: 0,
    //         area: ['500px', '300px'],
    //         skin: 'layui-layer-nobg', //没有背景色
    //         shadeClose: true,
    //         content: $('#layer')
    //     });
    // }


</script>
</html>